<template>
  <div>
    <el-page-header @back="goBack" content="数据详情页面">
    </el-page-header>
    <div class="black-space-30"></div>

    <el-table stripe  v-loading="tableInfo.loading" :data="tableInfo.data" border style="width: 100%" max-height="470"  @selection-change="handleSelectionChange">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column  v-for="t in tableInfo.title" :prop="t.prop" :label="t.lable" :key="t.id">
        <template slot-scope="scope">
          <span v-for="(e,i) in scope.row.answer[t.prop] " :key="i" style="border:1px solid #DCDFE6 ; padding:2px;margin-left:2px;">
            {{e}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="删除此条数据" placement="top-start">
            <el-button type="danger" size="mini" class="my-size12" icon="el-icon-delete" @click="deletItem(scope.row.id)">删除</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div class="black-space-30"></div>
    <!--分页条-->
    <el-row>
      <el-col :span="12">
        <el-button type="danger" size="medium" @click="deleteMore">批量删除</el-button>
        <el-button type="danger" size="medium" @click="getDate">刷新数据</el-button>
        <el-tooltip class="item" effect="dark" content="双击下载Excel" placement="top">
          <el-button type="success" size="medium"  @dblclick.native="downExcel">下载Excel</el-button>
        </el-tooltip>
        <el-button type="success" size="medium" @click="dialogVisible = true">数据分析</el-button>
      </el-col>
      <el-col :span="12">
        <el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :page-sizes="[10,15, 20]" layout="total, sizes,prev, pager, next, jumper" :total="tableInfo.total"></el-pagination>
      </el-col>
    </el-row>
    <!--为数据分析准备-->
    <itemData :flag.sync="dialogVisible"></itemData>
  </div>
</template>

<script>
import {ref, reactive } from '@vue/composition-api';
import itemData from "./dialog/itemdata" ;
import {  GetQuestion  } from "@/api/question"; 
import {  GetAllAnswer ,DeleteAnswer  , DownExcel} from "@/api/answer"; 
import { LocalFileDown  } from "@/utils/fileutil"; 
export default {
  name:"iteminfo",
  components:{
    itemData
  },
  setup(prop,{root,}){
    // 获得传过来的数据 id
    console.log(root.$router.currentRoute.params ,"===root.$router.params======")
    var  questionId = root.$router.currentRoute.params.id ;
    const tableInfo = reactive({
      title:[],
      data:[],
      total:20 ,
      loading:true ,
      pageSize: 10 ,
      currentPage:  0 ,
      pageSizes:[10, 20, 30]
    })
    // 请求 问卷 数据
    // 判断问卷信息 是 否请求 到
    var quesflag = false ;
    const getDate = ()=>{
      tableInfo.loading = true ;
      GetAllAnswer({
        id: questionId ,
        pageSize : tableInfo.pageSize ,
        currentPage: tableInfo.currentPage
      }).then((rep)=>{
        if(rep.data.status == 0){
          let repdata =  rep.data.message ;
          tableInfo.title = repdata.title ;
          tableInfo.data = repdata.data ;
          tableInfo.total =  repdata.total ;
          tableInfo.loading = false ;
        }
      })
    }
    // 加载数据
    getDate() ;
    const deleteAnswer = (ids) =>{
      DeleteAnswer({
        "questionId":questionId ,
        "answerIds":ids
      }).then((rep)=>{
        if(rep.data.status == 0){
          ids.forEach(id=>{
            tableInfo.data.some((e ,i )=>{
              if(e.id == id ){
                tableInfo.data.splice(i,1) ;
              }
            })
          })
          root.$message({
            type:"success" ,
            message:`成功删除${ids.length}条数据`
          })
        }
      })
    }
    const deletItem = (id)=>{deleteAnswer([id]) } 
      // 批量删除数据
    const deleteMore = ()=>{
      console.log(selectData)
      if(selectData.length  == 0 ){
        root.$message({
          showClose: true,
          message: "未选择任何数据",
          type: "success"
        });
      }else{
        root.$confirm(`是否确定删除此${selectData.length}条数据`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids =  [] ;
          selectData.forEach(item =>{ids.push(item.id) } ) ;
          deleteAnswer(ids) ;
        }).catch(() => {
          root.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
    
    const total = ref(120) ;
    const dialogVisible = ref(false) ;
    
    const goBack= ()=> {
      root.$router.go(-1);
    }
   
    const data = reactive([[1,2,3],[1,2,3]] );
    
     // 页面大小改变
    const handleSizeChange = pageSize => {
      // 还有数据的时候进行请求
      if(tableInfo.pageSize > pageSize){
        // 删除数据    ======================================  能优化
        tableInfo.pageSize = pageSize ;
        getData() ;
      }else if(tableInfo.pageSize < pageSize){
        if(tableInfo.pageSize < tableInfo.total ){
          tableInfo.pageSize = pageSize ;
          getData() ;
        }
      }
    };
    const handleCurrentChange = page => {
      if( page-1 !=tableInfo.currentPage){
        tableInfo.currentPage = page -1 ;
         getData() ;
      }
    };
    var selectData =[] ;
    const handleSelectionChange= (e)=>{
      selectData= e ;
    }
  
    const downExcel = ()=>{
      if(tableInfo.data.length == 0){
        root.$message({
          type: 'danger',
          message: '该问卷还没有任何做答数据'
        });
      }else{
        DownExcel({questionId}).then((res)=>{
          LocalFileDown(res,`${questionId}.xlsx`); 
        }).catch(()=>{
          root.$message({
            type: 'error',
            message: '下载失败，稍后重试'
          });  
        })
      }
    }
    return{
      dialogVisible ,
      tableInfo , data,total,
      goBack,handleSizeChange ,handleCurrentChange ,
      // 表格选择
      handleSelectionChange,
      //api 方法
      deleteMore, deletItem  , getDate ,downExcel 
    }
  }

}
</script>
<style scoped>

</style>